<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨域请求</title>
</head>
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<body>


<script type="text/javascript">
    $(document).ready(function () {
        //1.1 简单请求
        $("#ajaxGetReq1").click(function () {
            $.ajax({
                url: "http://localhost:8081/ajaxGetReq1",
                type: "GET",
                success: function (data) {
                    console.log(data);
                }
            });
        });
        //1.2 简单请求
        $("#ajaxPostReq2").click(function () {

            $.ajax({
                url: "http://localhost:8081/ajaxPostReq2",
                data: {name: "xxx"},
                type: "POST",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                },
                success: function (htmlobj) {
                    console.log(htmlobj);
                }
            })
        });
        //2. 复杂请求
        $("#ajaxPostReq").click(function () {
            var jsonStringify = JSON.stringify({"name": "xxx"});
            $.ajax({
                url: "http://localhost:8081/ajaxPostReq",
                data: jsonStringify,
                type: "POST",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader('Content-Type', 'application/json');
                },
                success: function (htmlobj) {
                    console.log(htmlobj);
                }
            })
        });
    });


</script>
<div id="ajaxGetReq1" style="padding: 10px;margin:5px; background-color: bisque; cursor:pointer">
    简单请求1: 点击开始发送跨域请求: get http://localhost:8081/ajaxGetReq1
</div>
<div id="ajaxPostReq2" style="padding: 10px;margin:5px; background-color: bisque; cursor:pointer">
    简单请求2: 点击开始发送跨域请求: get http://localhost:8081/ajaxGetReq2
</div>
<div id="ajaxPostReq" style="padding: 10px;margin:5px; background-color: bisque; cursor:pointer">
    复杂请求: 点击开始发送跨域请求: post http://localhost:8081/ajaxPostReq
</div>

</body>
</html>